import React, { Component } from 'react'

class Ha extends Component {
  shouldComponentUpdate(nextprops){    //只有满足条件时才执行render
      if(this.props.index === this.props.current || nextprops.current === nextprops.index)
        return true;
      return false;
  }
  render() {
    console.log("render")
    return (
      <div style={{float:'left', margin:'30px 10px', height:'100px', width:'100px', border: this.props.current === this.props.index? '2px red solid': '2px black solid'}}></div>
    )
  }
}

export default class App extends Component {
  state = {
      list:[1,2,3,4,5,6,7,8,9,0],
      current:0
  }  
  render() {
    var print = this.state.list.map((item, index)=>
        <Ha index={index} current={this.state.current} key={item}></Ha>)
    return (
      <div>
          <input type='text' style={{position:'absolute', top:0,left:0}} onChange={(evt)=>{
              this.setState({
                current: Number((evt.target.value - 1)%10)
              })
          }}></input>
          {print}
      </div>
    )
  }
}
